<template>
	<view class="page">
		<block v-if="emptyText == '' && JSON.stringify(orderInfo) != '{}'">
			<!-- 订单状态 star -->
			<view class="order_state" @tap="bindOrderStatus(orderInfo.num, orderInfo.course_count, orderInfo.course_order_id)">
				<view
					v-if="orderInfo.status == 0 || orderInfo.status == 1 || orderInfo.status == 3 || orderInfo.status == 5 || orderInfo.status == 6"
					:class="[
						'f_6',
						'order_state_text',
						'f_40',
						orderInfo.status == 1 ? 'orange' : '',
						orderInfo.status == 0 ? 'gery1' : '',
						orderInfo.status == 3 || orderInfo.status == 6 ? 'navy_blue' : ''
					]"
				>
					<block v-if="orderInfo.status == 1">订单待支付</block>
					<block v-else-if="orderInfo.status == 3">{{ orderInfo.is_comment == 1 ? '订单已完成' : '待评价' }}</block>
					<block v-else-if="orderInfo.status == 0">取消支付</block>
					<block v-else-if="orderInfo.status == 5">拒绝退款</block>
					<block v-else-if="orderInfo.status == 6">订单已退款</block>
				</view>
				<block v-else>
					<view class="order_state_title dis-flex flex-y-center">
						<text :class="['order_state_text','f_6', 'f_40', orderInfo.status == 2 ? 'purple' : 'navy_blue']">
							<block v-if="orderInfo.status == 2">课程进行中</block>
							<block v-else-if="orderInfo.status == 4">订单申请退款中</block>
						</text>
						<image class="icon" :src="imgPrefix('/static/image/icon/next.png')"></image>
					</view>
				</block>
			</view>
			<view class="top_block_view"></view>
			<!-- 课程信息 star -->
			<view class="block_view">
				<view class="block_title f_6">课程信息</view>
				<view class="course_info">
					<image class="course_img" :src="orderInfo.teacher != null ? orderInfo.teacher.headeravatar : imgPrefix('/static/image/icon/default_avatar.png')" mode="aspectFill"></image>
					<view class="course_con_info onelist-hidden">
						<!-- 	<view class="course_name f_32 onelist-hidden">{{ orderInfo.teacher_course.grade.title }}{{ orderInfo.teacher_course.language.title }}{{ orderInfo.teacher_course.teacher.nickname }}</view> -->
						<view class="course_name f_32 onelist-hidden">
							{{ orderInfo.teacher != null ? orderInfo.teacher.nickname : '' }}
						</view>
						<view class="teacher_year f_24 gery1 onelist-hidden">
							<text class="m-r-15">{{ orderInfo.language_grade }}{{ orderInfo.language }}</text>
							<text :class="['navy_blue', orderInfo.teacher != null ? 'm-r-15' : '']" v-if="orderInfo.teacher != null">
								教龄{{ orderInfo.teacher.teaching_year }}年
							</text>
							<block v-if="orderInfo.teacher != null">
								已授
								<text class="navy_blue">{{ orderInfo.teacher.course_count }}课</text>
							</block>
						</view>
					</view>
					<image
						@tap.stop="pageTo('/pages/teacher_detail/index', { id: orderInfo.teacher_course_id })"
						class="icon"
						:src="imgPrefix('/static/image/icon/next.png')"
					></image>
				</view>
				<view class="block_list">
					<view class="list_item">
						<view class="item_left gery1">课程语种</view>
						<view class="item_right">{{ orderInfo.language }}</view>
					</view>
					<view class="list_item">
						<view class="item_left gery1">授课方式</view>
						<view class="item_right">{{ orderInfo.classdata == 1 ? '教师上门' : '学生上门' }}</view>
					</view>
					<view class="list_item">
						<view class="item_left gery1">地址信息</view>
						<view class="item_right wd430 onelist-hidden">
							<block v-if="orderInfo.classdata == 1">
								<view class="address_info onelist-hidden">{{ orderInfo.address }}</view>
								<view class="user_info">{{ orderInfo.username }} {{ orderInfo.phone }}</view>
							</block>
							<block v-else>
								<view class="address_info onelist-hidden">{{ orderInfo.address }}</view>
								<view class="user_info">{{ orderInfo.username }} {{ orderInfo.phone }}</view>
							</block>
						</view>
					</view>
				</view>
			</view>

			<!-- 退款信息 -->
			<view
				class="block_view"
				v-if="orderInfo.status == 4 || orderInfo.status == 5 || orderInfo.status == 6"
				@tap="pageTo('/pages/refund/index', { refundId: orderInfo.refund.course_refund_id })"
				:style="{ backgroundSize: '654rpx 92rpx', backgroundImage: `url(${imgPrefix('/static/image/refund_bg.png')})` }"
			>
				<view class="block_title p_b_0 dis-flex flex-x-between">
					<text class="f_f">退款信息</text>
					<text class="f_f" v-if="orderInfo.status == 4">退款申请中</text>
					<text class="f_f" v-else-if="orderInfo.status == 5">退款失败</text>
					<text class="f_f" v-else-if="orderInfo.status == 6">退款成功</text>
				</view>
			</view>
			<!-- 课价信息 star -->
			<view class="block_view">
				<view class="block_title f_6">课价信息</view>
				<view class="block_list">
					<view class="list_item">
						<view class="item_left gery1">课程单价</view>
						<view class="item_right">
							<text class="orange f_6">￥<text class="font_bebas">{{ orderInfo.price }}</text></text>
							<text class="navy_blue">/{{ orderInfo.hour == 1 ? '' : orderInfo.hour }}小时</text>
						</view>
					</view>
					<view class="list_item">
						<view class="item_left gery1">课次课时</view>
						<view class="item_right navy_blue">{{ orderInfo.num }}次/{{ orderInfo.hour == 1 ? '' : orderInfo.hour }}小时</view>
					</view>
					<view class="list_item">
						<view class="item_left gery1">总课时长</view>
						<view class="item_right navy_blue">{{ orderInfo.total_hour }}小时</view>
					</view>
				</view>
				<view class="block_bottom dis-flex flex-x-end">
					<view class="navy_blue">
						<text class="f_28">合计：¥</text>
						<text class="f_40">{{ orderInfo.total_price }}</text>
					</view>
				</view>
			</view>

			<!-- 订单信息 star -->
			<view class="block_view">
				<view class="block_title f_6">订单信息</view>
				<view class="block_list">
					<view class="list_item">
						<view class="item_left gery1">订单编号</view>
						<view class="item_right">
							<text selectable class="navy_blue">{{ orderInfo.order_no }}</text>
							<text @tap="bindCopy(orderInfo.order_no)" class="copy">复制</text>
						</view>
					</view>
					<view class="list_item">
						<view class="item_left gery1">订单时间</view>
						<view class="item_right navy_blue">{{ orderInfo.createtime }}</view>
					</view>
				</view>
			</view>

			<!-- 意向上课时间 star -->
			<view class="block_view">
				<view v-if="courseList.length != 0" class="block_title f_6">意向上课时间</view>
				<view v-if="courseList.length != 0" class="block_list_view">
					<view class="time_list" :style="{ height: courseList.length >= 5 && !isShowMore ? timeHeight[isShowMore ? 1 : 0] : 'unset' }">
						<view class="time_item navy_blue" v-for="(itemq, indeq) in courseList" :key="indeq">
							<text>{{ itemq.date }}/{{ itemq.week }} {{ itemq.time }}</text>
						</view>
					</view>
					<view v-show="courseList.length >= 5" class="get_more f-c-9" @tap.stop="bindShowMore">{{ isShowMore ? '收起' : '查看全部' }}</view>
				</view>
				<view :class="['content_list', courseList.length > 0 ? 'm-t-24' : '']">
					<view class="content_item">
						<image class="icon" :src="imgPrefix('/static/image/icon/service.png')"></image>
						<text>联系客服</text>
						<!-- #ifdef MP-WEIXIN -->
						<button class="share-btn" open-type="contact">客服</button>
						<!-- #endif -->
					</view>
					<view class="content_item" @tap="bindConcat">
						<image class="icon" :src="imgPrefix('/static/image/icon/service.png')"></image>
						<text>联系老师</text>
					</view>
				</view>
			</view>
			<view class="is_bottom">到底了~</view>
			<!-- 底部栏 star -->
			<view :class="['fixed_bottom', orderInfo.status == 0 || orderInfo.status == 1||orderInfo.num!=orderInfo.course_count ? 'flex-x-between' : 'flex-x-end']">
				<view v-if="orderInfo.status == 0" class="pay_money">
					<text class="navy_blue f_28">应付款：</text>
					<text class="orange f_28 mr6">¥</text>
					<text class="orange f_40">{{ orderInfo.total_price }}</text>
				</view>
				<view v-if="orderInfo.status == 1 || orderInfo.status == 2 || orderInfo.status == 4" class="btn navy_blue" @tap.stop="bindBtn(0, orderInfo.status)">
					<block v-if="orderInfo.status == 1">删除订单</block>
					<block v-if="orderInfo.status == 2">申请退款</block>
					<block v-else-if="orderInfo.status == 4">取消申请</block>
				</view>
				<view v-if="orderInfo.status != 2 && orderInfo.status != 4||orderInfo.num!=orderInfo.course_count" class="btn" @tap.stop="bindBtn(1, orderInfo.status, orderInfo.is_comment)">
					<block v-if="orderInfo.status == 1">立即支付</block>
					<block v-else-if="orderInfo.status == 3 && orderInfo.is_comment == 0">去评论</block>
					<block v-else-if="orderInfo.status == 0 || orderInfo.status == 3 || orderInfo.status == 5 || orderInfo.status == 6">重新约课</block>
					<block v-else-if="orderInfo.num!=orderInfo.course_count">去约课</block>
				</view>
			</view>
			<zan-popup :show="showCourse" type="bottom" @close="closeCoursePopup">
				<view class="schedule-list-box">
					<view class="title t-c f_32">
						课程进度
						<image @click="closeCoursePopup" :src="imgPrefix('/static/image/icon/address_close.png')"></image>
					</view>
					<scroll-view scroll-y="true" class="scroll_view">
						<view
							v-for="(item, index) in scheduleList"
							:key="index"
							:class="[
								'item',
								'dis-flex',
								'flex-x-between',
								'f_26',
								item.status == 3 || orderInfo.course_count == 0 ? 'color0' : item.status == 1 ? 'gery1' : 'navy_blue'
							]"
						>
							<view class="dis-flex flex-x-between status-box flex-y-center">
								<text :class="['li', orderInfo.course_count == 0 || item.status == 2 || item.status == 3 ? 'b_g_violet1' : item.status == 1 ? 'b_g_gery1' : 'b_g_navy_blue']"></text>
								<text>课次{{ orderInfo.course_count == 0 ? '未预约' :item.status == 2?'未预约':item.status == 3 ?(item.is_start?'授课中':'未开始'): '已完成' }}</text>
								<text>{{ index + 1 }}/{{ orderInfo.num }}</text>
							</view>
							<view class="dis-flex flex-x-between date">
								<block v-if="orderInfo.course_count != 0&&item.status != 2">
									<text>{{ item.date }}/{{ item.week }}</text>
									<text>{{ item.time }}</text>
								</block>
							</view>
						</view>
					</scroll-view>
				</view>
			</zan-popup>
			<zan-popup :show="showPay" @close="closePayPopup">
				<view class="payment_box">
					<view class="payment_top">选择支付方式</view>
					<view class="payment_list">
						<view class="payment_item" @tap.stop="setPayIndex(2)">
							<view class="flex-box dis-flex flex-y-center">
								<image class="wechat" :src="imgPrefix('/static/image/icon/wechat.png')"></image>
								<text>微信支付</text>
							</view>
							<image
								class="select"
								:src="payIndex == 2 ? imgPrefix('/static/image/icon/payment_selected.png') : imgPrefix('/static/image/icon/address_status_0.png')"
							></image>
						</view>
						<view class="payment_item" @tap.stop="setPayIndex(1)">
							<view class="flex-box dis-flex flex-y-center">
								<image class="balance" :src="imgPrefix('/static/image/icon/balance.png')"></image>
								<text>余额支付</text>
								<text class="balance_text">(剩余￥{{ balance }})</text>
							</view>
							<image
								class="select"
								:src="payIndex == 1 ? imgPrefix('/static/image/icon/payment_selected.png') : imgPrefix('/static/image/icon/address_status_0.png')"
							></image>
						</view>
					</view>
					<view :class="['payment_bottom', payIndex == 1 || payIndex == 2 ? 'active' : '']" @tap.stop="bindPay">确认支付￥{{ orderInfo.total_price }}</view>
				</view>
			</zan-popup>
		</block>
		<page-empty v-else-if="emptyText != ''" :emptyText="emptyText" :paddingTop="statusBarHeight + 70 + 'px'" @comEmptyBtn="bindEmptyBtn"></page-empty>
	</view>
</template>

<script>
import zanPopup from '@/components/popup/index.vue';
import { commonMixinFun } from '@/static/mixins/common.js'; // 公共
import { pageEmpty } from '@/static/mixins/pageEmpty.js';
import API from '@/static/api/index.js';
const app = getApp();
export default {
	components: {
		zanPopup
	},
	mixins: [commonMixinFun, pageEmpty],
	data() {
		return {
			unSetData: true,
			orderInfo: {},
			orderId: 0, //订单ID
			scheduleList: [], //弹出的列表
			showCourse: false, //是否弹出课程列表
			isShowMore: true, //是否展示意向上课时间
			timeHeight: ['200rpx', '100%'],
			showPay: false,
			payIndex: 2,
			balance: 0 //余额
		};
	},
	onLoad(option) {
		app._log(option);
		this.orderId = option.orderId;
		if (option.hasOwnProperty('showPay')) {
			this.showPay = option.showPay;
		}
	},
	computed: {
		// 是否需要显示选择时间更多按钮
		showTimeListHasMore: function() {
			return Number(this.timeHeight[1].substring(0, 3)) > 200;
		},
		// 找出有预约过的课程
		courseList: function() {
			let { orderInfo } = this;
			app._log('xxxx', orderInfo.hasOwnProperty('course') ? orderInfo.course.filter(o => o.date != '') : []);
			return orderInfo.hasOwnProperty('course') ? orderInfo.course.filter(o => o.date != '') : [];
		}
	},
	onShow() {
		this.getOrderDetail(this.orderId);
		// const query = uni.createSelectorQuery().in(this);
		// query.select('.time_list').boundingClientRect(data => {
		//   this.timeHeight = ['200rpx',(data.height*750 / uni.getSystemInfoSync().windowWidth)+'rpx'];
		this.isShowMore = false;
		// }).exec();
	},
	watch: {
		showPay(value, oldValue) {
			app._log('变了showPay', value, oldValue, typeof value);
			if (value == 'true' || value == true) {
				this.getUserInfo();
			}
		}
	},
	methods: {
		// 点击关闭支付弹窗
		closePayPopup(delay = 0) {
			setTimeout(() => {
				this.showPay = !this.showPay;
			}, delay);
		},
		// 点击支付
		bindPay() {
			let that = this;
			let { payIndex, orderInfo, balance } = this;
			app._log(balance);
			if (payIndex == 0) {
				this.showToast('请选择支付方式');
			} else if (payIndex == 1 && Number(balance) < Number(orderInfo.total_price)) {
				uni.showModal({
					title: '温馨提示',
					content: '余额不足，是否前往充值',
					success: res => {
						if (res.confirm) {
							this.pageTo('/pages/my_account/index', { needReturn: true }); //需要返回当前页面
						}
					}
				});
			} else {
				if (payIndex == 1) {
					uni.showModal({
						title: '提示',
						content: '确认使用余额支付吗？',
						success: function(res) {
							if (res.confirm) {
								that.toPay();
							} else if (res.cancel) {
								app._log('用户点击取消');
							}
						}
					});
				} else {
					this.toPay();
				}
			}
		},
		toPay() {
			
				app.requestSubscribeMessage('order_success',()=>{
			let { payIndex, orderInfo } = this;
			app._log('去支付');
			API.payAgain({ course_order_id: orderInfo.course_order_id, pay_type: payIndex })
				.then(res => {
					app._log();
					if (res.code == 1) {
						this.showToast('支付成功');
						this.closePayPopup();
						this.getOrderDetail(orderInfo.course_order_id, false);
					} else {
						this.showToast(res.data.msg || '支付失败');
					}
				})
				.catch(err => {
					app._log(err);
					this.showToast(err.data.msg || '支付失败');
				});
				})
		},
		// 获取用户信息
		getUserInfo() {
			API.getUserInfo()
				.then(res => {
					if (res.code == 1) {
						app._log(res);
						this.balance = res.data.user.money;
					} else {
						this.balance = 0;
						this.showToast('获取余额失败，请稍后再试');
					}
				})
				.catch(err => {
					this.balance = 0;
					this.showToast('获取余额失败，请稍后再试');
				});
		},
		//设置支付方式
		setPayIndex(type) {
			if (type == 1 && Number(this.balance) < Number(this.orderInfo.total_price)) {
				uni.showModal({
					title: '温馨提示',
					content: '余额不足，是否前往充值',
					success: res => {
						if (res.confirm) {
							this.pageTo('/pages/my_account/index', { needReturn: true }); //需要返回当前页面
						}
					}
				});
				return false;
			}
			this.payIndex = type;
		},
		// 点击复制
		bindCopy(text) {
			uni.setClipboardData({
				data: text.toString(),
				success: res => {
					// this.showToast('复制成功');
				},
				catch: err => {
					this.showToast('复制失败，请手动复制');
				}
			});
		},
		// 点击底部按钮
		bindBtn(index, state, is_comment) {
			let { orderInfo, unSetData } = this;
			if (!unSetData) {
				if (index == 0) {
					if (state == 1) {
						app._log('删除订单');
						uni.showModal({
							content: '是否删除订单？',
							success: res => {
								if (res.confirm) {
									let { unSetData, orderInfo } = this;
									if (!unSetData) {
										this.unSetData = true;
										API.orderRefundDelete(orderInfo.course_order_id)
											.then(res => {
												if (res.code == 1) {
													this.showToast('订单删除成功');
													setTimeout(() => {
														uni.navigateBack({
															delta: 1
														});
													}, 1500);
												} else {
													this.showToast(res.msg || '请稍后重试');
													this.unSetData = false;
												}
											})
											.catch(res => {
												this.showToast('请稍后重试');
												this.unSetData = false;
											});
									}
								}
							}
						});
					} else if (state == 2) {
						app._log('申请退款');
						this.pageTo('/pages/refund/index', { orderId: orderInfo.course_order_id });
					} else {
						app._log('取消申请');
						uni.showModal({
							content: '是否取消申请？',
							success: res => {
								if (res.confirm) {
									API.orderRefundCancel(orderInfo.refund.course_refund_id)
										.then(res => {
											if (res.code == 1) {
												this.showToast('取消成功');
												this.orderInfo.status = 2;
											} else {
												this.showToast(res.data.msg || '请稍后重试');
											}
										})
										.catch(res => {
											this.showToast('请稍后重试');
										});
								}
							}
						});
					}
				} else {
					if (state == 1) {
						app._log('去支付');
						this.showPay = true;
					} else if (state == 3 && is_comment == 0) {
						app._log('去评论');
						this.pageTo('/pages/comment/index', { course_order_id: orderInfo.course_order_id });
					} else if (state == 0 || state == 3 || state == 5 || state == 6) {
						app._log('重新约课');
						this.pageTo('/pages/teacher_detail/index', { id: orderInfo.teacher_course_id });
					}else if(orderInfo.num!=orderInfo.course_count){
						console.log('去约课');
						let arr =  orderInfo.course.filter(o=>o.status==2).sort((a,b)=>{a.course_id-b.course_id})
						this.pageTo('/pages/course_detail/index', { course_id: arr[0].course_id });
						
					}
				}
			}
		},
		// 点击联系教师
		bindConcat() {
			if (this.orderInfo.teacher != null) {
				uni.makePhoneCall({
					phoneNumber: this.orderInfo.teacher.phone
				});
			} else {
				this.showToast('信息已过期');
			}
		},
		// 获取订单详情
		getOrderDetail(id, showLoading = true) {
			this.unSetData = true;
			API.getOrderDetail(id, showLoading)
				.then(res => {
					if (res.code == 1) {
						this.unSetData = false;
						app._log(res);
						this.orderInfo = res.data.order;
						setTimeout(() => {
							if (this.showCourseList) {
								uni.createSelectorQuery()
									.in(this)
									.select('.time_list')
									.boundingClientRect(data => {
										let height = (data.height * 750) / uni.getSystemInfoSync().windowWidth;
										this.timeHeight = [(height > 200 ? 200 : height) + 'rpx', height + 'rpx'];
										this.isShowMore = false;
									})
									.exec();
							}
						}, 50);
					} else {
						this.emptyText = '找不到该订单';
					}
				})
				.catch(err => {
					this.emptyText = err.msg || '网络加载失败，白小可很无奈';
				});
		},

		closeCoursePopup(delay = 0) {
			setTimeout(() => {
				this.showCourse = !this.showCourse;
			}, delay);
		},
		// 点击课程预约记录列表
		bindShowMore() {
			this.isShowMore = !this.isShowMore;
		},
		// 点击顶部订单状态
		bindOrderStatus(num, course_count, id) {
			app._log(num, course_count, id);
			
			// if (num == course_count) {
				//课程全部被预约出去了
			if(this.orderInfo.status==2){
				API.courseDegree(id).then(({code,data,msg})=>{
					console.log(code,data,msg)
					if(code==1){
						this.scheduleList = data.course;
						this.showCourse = true;
					}else{
						this.showCourse = false;
					}
				})
				}
				// 
			// } else if (course_count > 0) {
			// 	//课程有约出去过
			// 	API.courseFinish(id).then(({code,data,msg})=>{
			// 		console.log(code,data,msg)
			// 		if(code==1){
			// 			this.scheduleList = data.course;
			// 			this.showCourse = true;
			// 		}else{
			// 			this.showCourse = false;
			// 		}
			// 	})
			// } else {
			// 	//课程全部没有约过
			// 	this.showCourse = true;
			// }
		}
	}
};
</script>

<style lang="scss">
.mr6 {
	margin-right: 6rpx;
}
.m-r-15 {
	margin-right: 15rpx;
}
$purple: #7f4aff;
.purple {
	color: $purple;
}
.page {
	margin-bottom: calc(120rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}
.icon {
	width: 32rpx;
	height: 32rpx;
}
.order_state {
	padding: 24rpx 48rpx 12rpx;
	position: fixed;
	left: 0;
	top: 0;
	background-color: #f8f8f8;
	width: 100vw;
	.order_state_title {
		margin-bottom: 8rpx;
	}
	.order_state_text {
		margin-right: 8rpx;
	}
}
.top_block_view{
	width: 100vw;
	height: 100rpx;
}
.block_view {
	margin: 0 48rpx 16rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 16rpx 24rpx;
	.block_title {
		font-size: 32rpx;
		color: #252748;
		padding-bottom: 16rpx;
	}
	.course_info {
		display: flex;
		height: 144rpx;
		align-items: center;
		padding: 24rpx 0;
		border-top: 2rpx solid #f8f8f8;
		.course_img {
			width: 96rpx;
			height: 96rpx;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 49, 183, 0.08);
			border-radius: 8rpx;
			border: solid 2rpx #ffffff;
		}
		.course_con_info {
			padding-left: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			.course_name {
				padding-bottom: 8rpx;
			}
		}
	}
	.wd430 {
		width: 430rpx;
	}
	.block_list {
		border-top: 2rpx solid #f8f8f8;
		.list_item {
			display: flex;
			// align-items: center;
			justify-content: space-between;
			&:first-child {
				margin-top: 16rpx;
			}
			&:not(:last-child) {
				margin-bottom: 24rpx;
			}
			.item_right {
				// max-width: 392rpx;
				// display: flex;
				// flex-direction: column;
				// justify-content: flex-end;
				& > view {
					text-align: right;
				}
			}
		}
	}
	.block_bottom {
		border-top: 2rpx solid #f8f8f8;
		padding-top: 12rpx;
		margin-top: 24rpx;
	}
	.no_time_list {
		padding: 26rpx 0 16rpx;
		border-top: 2rpx solid #f8f8f8;
		.booking_time {
			padding-right: 4rpx;
		}
	}
	.block_list_view {
		width: 606rpx;
		// height: 320rpx;
		background-color: rgba(236, 237, 250, 0.32);
		border-radius: 16rpx;
		padding: 24rpx;
		font-size: 26rpx;
		position: relative;
		.time_list {
			width: 100%;
			overflow: hidden;
			height: auto;
			transition: height 0.5s;
		}
		.time_item {
			line-height: 36rpx;
			&:not(:last-child) {
				margin-bottom: 8rpx;
			}
		}
		.get_more {
			margin-top: 24rpx;
			text-align: center;
		}
	}
	.content_list {
		display: flex;
		width: 606rpx;
		line-height: 88rpx;
		background-color: #ededf4;
		border-radius: 16rpx;
		&.m-t-24 {
			margin-top: 24rpx;
		}
		view {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			image {
				margin-right: 4rpx;
			}
		}
	}
}
.copy {
	display: inline-block;
	width: 60rpx;
	text-align: center;
	line-height: 38rpx;
	background-color: #ffffff;
	border-radius: 4rpx;
	border: solid 1.2rpx rgba(143, 143, 154, 0.3);
	margin-left: 8rpx;
	color: #8f8f9a;
	font-size: 24rpx;
}
.is_bottom {
	line-height: 88rpx;
	text-align: center;
	font-size: 22rpx;
	color: #8f8f9a;
}
.fixed_bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	width: 750rpx;
	height: 116rpx;
	background-color: #ffffff;
	box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(237, 237, 237, 0.5);
	// border-radius: 40rpx 40rpx 0rpx 0rpx;
	display: flex;
	align-items: center;
	padding: 0 48rpx;
	.btn {
		width: 316rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 24rpx;
		font-size: 32rpx;
		&.navy_blue {
			background-color: #f0f0f6;
		}
		&:not(.navy_blue) {
			color: #ffffff;

			background-image: linear-gradient(270deg, #9254ff 0%, #7f4aff 100%);
		}
	}
}
.schedule-list-box {
	width: 750rpx;
	background: white;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	height: 664rpx;
	// overflow-y: scroll;
	.li {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		margin-right: 18rpx;
		position: relative;
	}
	.title {
		line-height: 92rpx;
		position: relative;
		margin-bottom: 40rpx;
		image {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 48rpx;
			top: 30rpx;
		}
	}
	.scroll_view {
		height: calc(564rpx - constant(safe-area-inset-bottom));
		height: calc(564rpx - env(safe-area-inset-bottom));
	}
	.color0 {
		color: #7f4aff;
	}
	.item {
		padding: 0 48rpx 42rpx 48rpx;
		.status-box {
			width: 37%;
		}
		.date {
			width: 60%;
		}
	}
}
.li::after {
	content: '';
	height: 75rpx;
	width: 10rpx;
	position: absolute;
	bottom: -75rpx;
	left: 2px;
}
.b_g_violet1::after {
	border-left: 1rpx dashed #7f4aff;
}
.b_g_gery1::after {
	border-left: 1rpx dashed #8f8f9a;
}
.b_g_navy_blue::after {
	border-left: 1rpx dashed #1f2633;
}
.item:last-of-type .li::after {
	content: '' !important;
	height: 0 !important;
	width: 0 !important;
}

.payment_ {
	&box {
		width: 642rpx;
		height: 428rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		overflow: hidden;
		position: relative;
	}
	&top {
		text-align: center;
		font-size: 32rpx;
		line-height: 44rpx;
		padding: 40rpx 0 26rpx;
		color: #252748;
	}
	&list {
		// display: flex;
		// justify-content: space-between;
		padding: 0 34rpx 58rpx 36rpx;
	}
	&item {
		display: flex;
		align-items: center;
		padding-top: 40rpx;
		.wechat,
		.balance {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
		.balance {
			.balance_text {
				font-size: 24rpx;
				color: #8f8f9a;
			}
		}
		.select {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
		}
	}
	&bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		text-align: center;
		line-height: 92rpx;
		font-size: 32rpx;
		width: 100%;
		&.active {
			color: #fff;
			background-image: linear-gradient(270deg, #7f4aff 0%, #9254ff 100%);
		}
		&:not(.active) {
			color: #d1d2db;
			background-color: #f0f0f6;
		}
	}
}
</style>
